<template>
  <div id="container"></div>
</template>

<script>
import { showMsg } from '@/utils/showMsg'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'MapView',
  data()
  {
    return {
      map: null, // 地图实例
      infoWindow: null, // 信息窗口实例
      contextMenu: null, // 右键菜单实例
      points: [ // 将 points 数据提升到 data 中
        {
          position: [114.351735, 36.06358], // 经纬度
          icon: require('@/assets/kuaidigui.png'), // 图标
          name: '智柜1号柜-教学主楼' // 名称
        },
        {
          position: [114.354934, 36.06423],
          icon: require('@/assets/kuaidigui.png'),
          name: '智柜2号柜-德馨苑'
        },
        {
          position: [114.347818, 36.063174],
          icon: require('@/assets/kuaidigui.png'),
          name: '智柜3号柜-南体育场'
        },
        {
          position: [114.349721, 36.068386],
          icon: require('@/assets/kuaidigui.png'),
          name: '智柜4号柜-图书馆'
        },
        {
          position: [114.348065, 36.066249],
          icon: require('@/assets/kuaidigui.png'),
          name: '智柜5号柜-计算机学院'
        },
        {
          position: [114.352371, 36.058874],
          icon: require('@/assets/kuaidigui.png'),
          name: '智柜6号柜-厚德苑'
        }
      ]
    }
  },
  mounted()
  {
    this.initAMap()
  },
  unmounted()
  {
    this.map?.destroy() // 销毁地图实例
    this.contextMenu?.destroy() // 销毁右键菜单实例
  },
  methods: {
    initAMap()
    {
      AMapLoader.load({
        key: 'fbe5594b9198176e734f51b2dfe76e21', // 你的高德地图 Key
        version: '2.0', // 高德地图版本
        plugins: [] // 插件列表（这里留空，稍后通过 AMap.plugin 加载）
      })
        .then((AMap) =>
        {
          // 初始化地图
          this.map = new AMap.Map('container', {
            viewMode: '3D', // 是否为 3D 地图模式
            zoom: 19, // 初始化地图级别
            center: [114.349689, 36.065635] // 初始化地图中心点位置
          })

          // 绑定地图点击事件
          this.map.on('click', (event) =>
          {
            const lng = event.lnglat.getLng() // 获取经度
            const lat = event.lnglat.getLat() // 获取纬度
            console.log('点击的坐标:', [lng, lat])
          })

          // 初始化右键菜单
          this.initContextMenu(AMap)

          // 异步加载多个插件
          AMap.plugin(['AMap.Scale', 'AMap.HawkEye'], () =>
          {
            const scale = new AMap.Scale()
            const hawEye = new AMap.HawkEye()
            this.map.addControl(scale)
            this.map.addControl(hawEye)
          })

          // 初始渲染点
          this.renderPoints(AMap)
        })
        .catch((e) =>
        {
          console.error('地图加载失败:', e)
        })
    },
    initContextMenu(AMap)
    {
      // 创建右键菜单内容
      const menuContent = `
        <div style="
          background: #fff;
          border-radius: 4px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          padding: 8px 0;
          font-family: Arial, sans-serif;
          min-width: 120px;
        ">
          <div class="menu-item" style="padding: 8px 16px; cursor: pointer;">查看坐标</div>
          <div class="menu-item" style="padding: 8px 16px; cursor: pointer;">清除标记</div>
          <div class="menu-item" style="padding: 8px 16px; cursor: pointer;">显示站点</div>
        </div>
      `

      // 创建右键菜单实例
      this.contextMenu = new AMap.ContextMenu({
        isCustom: true, // 使用自定义内容
        content: menuContent // 设置菜单内容
      })

      // 绑定右键菜单事件
      /*       this.contextMenu.addItem('添加标记', () =>
      {
        const center = this.map.getCenter()
        alert(`在坐标 ${center.getLng().toFixed(6)}, ${center.getLat().toFixed(6)} 添加标记`)
      }) */

      this.contextMenu.addItem('查看坐标', () =>
      {
        const center = this.map.getCenter()
        showMsg(`当前中心点坐标: ${center.getLng().toFixed(6)}, ${center.getLat().toFixed(6)}`, null, 'success')
      })

      this.contextMenu.addItem('清除标记', () =>
      {
        this.map.clearMap()
        showMsg('已清除所有标记', null, 'success')
      })

      // 添加“显示站点”菜单项
      this.contextMenu.addItem('显示站点', () =>
      {
        this.renderPoints(AMap) // 重新渲染点
        showMsg('已重新渲染站点', null, 'success')
      })

      // 绑定地图右键点击事件
      this.map.on('rightclick', (event) =>
      {
        this.contextMenu.open(this.map, event.lnglat)
      })
    },
    renderPoints(AMap)
    {
      // 清除地图上的所有标记
      this.map.clearMap()

      // 遍历 points 数组，重新添加点
      AMap.plugin(['AMap.ElasticMarker'], () =>
      {
        this.points.forEach((point) =>
        {
          let stylesArray = [
            {
              icon: {
                img: point.icon,
                size: [21, 16], // 图标的原始大小
                anchor: 'bottom-center', // 锚点位置
                fitZoom: 14, // 最合适的级别 在此级别显示为图标原始大小
                scaleFactor: 2, // 地图放大一级的缩放比例系数
                maxScale: 2, // 图片的最大放大比例，随着地图放大图标会跟着放大，最大为2
                minScale: 1 // 图片的最小缩小比例，随着地图缩小图标会跟着缩小，最小为1
              },
              label: {
                content: point.name, // 文本内容
                position: 'BM', // 文本位置相对于图标的基准点，"BM"为底部中央
                minZoom: 15, // label的最小显示级别，即文本标注在地图15级及以上，才会显示
                offset: new AMap.Pixel(0, 1)
              }
            },
            {
              icon: {
                img: point.icon,
                size: [32, 32], // 图标放大后的尺寸
                anchor: 'bottom-center',
                fitZoom: 17.5, // 最合适的级别 在此级别显示为放大后的图标大小
                scaleFactor: 2,
                maxScale: 2,
                minScale: 0.125
              },
              label: {
                content: point.name,
                position: 'BM',
                minZoom: 15,
                offset: new AMap.Pixel(0, 1)
              }
            }
          ]

          let zoomStyleMapping = {
            14: 0, // 14-17级使用样式 0
            15: 0,
            16: 0,
            17: 0,
            18: 1, // 18-20级使用样式 1
            19: 1,
            20: 1
          }

          let elasticMarker = new AMap.ElasticMarker({
            position: point.position, // 点标记位置
            styles: stylesArray, // 指定样式列表
            zoomStyleMapping // 指定 zoom 与样式的映射
          })

          // 添加点击事件监听
          elasticMarker.on('click', (event) =>
          {
            // 如果已有信息窗口，先关闭
            if (this.infoWindow) this.infoWindow.close()

            // 创建信息窗口
            this.infoWindow = new AMap.InfoWindow({
              content: `
            <div style="
              padding: 16px;
              background: #ffffff;
              border-radius: 8px;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              font-family: Arial, sans-serif;
              max-width: 300px;
            ">
              <div style="display: flex; align-items: center; margin-bottom: 12px;">
                <img src="${point.icon}" style="width: 24px; height: 24px; margin-right: 8px;" />
                <h3 style="margin: 0; font-size: 16px; color: #333;">${point.name}</h3>
              </div>
              <div style="margin-bottom: 12px;">
                <p style="margin: 0; font-size: 14px; color: #666;">位置：${event.lnglat.getLng().toFixed(6)}, ${event.lnglat.getLat().toFixed(6)}</p>
                <p style="margin: 0; font-size: 14px; color: #666;">状态：<span style="color: #52c41a;">正常</span></p>
                <p style="margin: 0; font-size: 14px; color: #666;">容量：<span style="color: #1890ff;">80%</span></p>
              </div>
              <button id="close-info-window" style="
                padding: 8px 16px;
                background: #1890ff;
                color: #fff;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
              ">
                关闭
              </button>
            </div>
          `,
              offset: new AMap.Pixel(0, -30), // 信息窗口的偏移量
              isCustom: true // 使用自定义内容
            })

            // 打开信息窗口
            this.infoWindow.open(this.map, event.lnglat)

            // 绑定关闭按钮的点击事件
            const closeButton = document.getElementById('close-info-window')
            if (closeButton)
            {
              closeButton.onclick = () =>
              {
                this.infoWindow.close()
              }
            }
          })

          // 将标记添加到地图
          this.map.add(elasticMarker)
        })

        // 调整地图视野以显示所有点
        this.map.setFitView()
      })
    }
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 600px;
  border-radius: 20px;
}
</style>
